<template>
  <el-dialog
    top="30px"
    title="详情"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-button class="float-right m-1" @click="getData()" icon="el-icon-refresh" :loading="loading">
      刷新
    </el-button>
    <el-button
      class="float-right m-1"
      icon="el-icon-download"
      :loading="exportLoading"
      @click="exportAllPages"
    >
      导出
    </el-button>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { dataAdapter } from '@/bank/views/limit/index'
import hndTableMixin from '@/bank/views/business/limit/history/mixins'
export default {
  components: {},
  mixins: [hndTableMixin],
  props: {
    visible: Boolean,
    otherParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tableName: 'datum_one_county_industry',
      loading: false,
      tableData: [],
      totalCount: 0,
      params: {
        index: 1,
        size: 10,
        'review_approval.in': '4,5,6,7',
      },
      tableColumns: [
        {
          attrs: { label: '借款客户', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '项目ID', prop: 'customer_related_id', align: 'center' } },
        { attrs: { label: '归属市', prop: 'address_name_city', align: 'center' } },
        { attrs: { label: '归属县', prop: 'address_name_county', align: 'center' } },
        { attrs: { label: '联系人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'corp_phone', align: 'center' } },
        { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
        { attrs: { label: '担保(放款)金额(万元)', prop: 'warranty_amount', align: 'center' } },
        {
          attrs: { label: '放款日期', prop: 'load_date', align: 'center', minWidth: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        {
          attrs: { label: '还款日期', prop: 'load_end_date', align: 'center', minWidth: '100px' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '银行项目经理', prop: 'bank_user_name', align: 'center' } },
        { attrs: { label: '借据号', prop: 'iou_no', align: 'left' } },
        { attrs: { label: '导入时间', prop: 'create_time', align: 'left', minWidth: '90px' } },
        { attrs: { label: '导入银行', prop: 'bank_name', align: 'left', minWidth: '90px' } },
      ],
      exportLoading: false,
    }
  },
  computed: {
    pages() {
      return Math.ceil(this.totalCount / 10000)
    },
  },
  watch: {
    otherParams: {
      handler: function () {
        if (this.visible) {
          this.getData()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getParams() {
      return this.params
    },
    exportAllPages() {
      const { index, size, subKey, ...params } = this.getParams()
      const requestAll = []
      for (let i = 1; i <= this.pages; i++) {
        requestAll.push(this.fetchDataTimeout({ ...params, index: i, size: 10000 }))
      }
      this.exportLoading = true
      Promise.all(requestAll)
        .then(arrRes => {
          let datas = []
          arrRes.forEach(res => {
            datas = datas.concat(res)
          })
          this.exportExcel('限率业务-项目明细', datas)
          if (this.pages > 2) {
            this.$message.warning('正在导出请耐心等待')
          }
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
    dataAdapter(item) {
      item = dataAdapter(item)
      return item
    },
    getData() {
      this.loading = true
      this.params = { ...this.params, ...this.otherParams }
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = res?.data?.data ?? []
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
